<template>
<div class="account_table_f">
	<el-table
    :data="transactionList.list"
    style="width: 100%;border:10px;background-color: #212C4F;"
    :empty-text ="$lang('No_data')"
  	:row-style="{
  		'border':'none',
  		'background-color':'#1D2748',
  		'border-bottom':'none',
  	}"	
  	>
    <el-table-column
      prop="hash"
      :label="$lang('TXHASH')"
      width="200">
      <template scope='scope' ><router-link style="cursor: pointer;color: #cca33c;" :to="{path:'/TransactionDetailed/' + scope.row.hash}">{{scope.row.hash}}</router-link></template>
    </el-table-column>
    <el-table-column
      prop="blockheight"
      :label="$lang('BLOCK_TAB')"
      width="140">
    </el-table-column>
    <el-table-column
    prop="time"
      :label="$lang('TIME')"
    >
    <template slot-scope='scope' >{{ $filterTime(scope.row.time) }}</template>
    </el-table-column>
    <el-table-column
      prop="receiptaddress"
      :label="$lang('TO')">
      <template scope='scope' ><span class="callspan" @click="receiverC( scope.row.receiptaddress )">{{ scope.row.receiptaddress }}</span></template>
    </el-table-column>
    <el-table-column
      width="60"
     >
      <template slot-scope='scope' ><img src="../../assets/img/left.png" alt=""></template>
    </el-table-column>
    <el-table-column
      prop="payaddress"
      :label="$lang('FROM')">
      <template scope='scope' ><span class="callspan" @click="senderC( scope.row.payaddress )">{{ scope.row.payaddress }}</span></template>
    </el-table-column>
    <el-table-column
      prop="value"
      :label="$lang('VALUE')">
    </el-table-column>
    <el-table-column
      prop="sumFee"
      :label="$lang('TXFEE')">
      <template slot-scope='scope' >{{ scope.row.sumFee == null?0:scope.row.sumFee}}</template>
    </el-table-column>
  </el-table>
  <el-pagination
        v-if="transactionList.pages !== 0"
	  layout="prev, pager, next"			  
	  :total="transactionList.pages * 10"
	  @current-change="getTransactionByReceiptAddress"
	  >
	</el-pagination>
</div>
</template>

<script>
import axios from 'axios';
import url from '@/api/url.js';
export default {
	data(){
		return {
			transactionList: [],
		}
	},
	created(){
		this.getTransactionByReceiptAddress(1);    
	},
	methods:{
        senderC (val) {
            this.$parent.getAccountByAddress()
            this.getTransactionByReceiptAddress(1)
            this.$router.push({ path:'/account/sender/' + val + '/accountTableS'})
            
        },
        receiverC (val) {
            this.$parent.getAccountByAddress()
            this.getTransactionByReceiptAddress(1)
            this.$router.push({ path:'/account/receiver/' + val + '/accountTableF'})
            
        },
        getTransactionByReceiptAddress(type){
            let that = this
            const loading = this.$loading({
                text: that.$lang('loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            axios.get(url.urlblockH + '/transaction/getTransactionByReceiptAddress', {
                params: {
                    pageNum: type,
                    pageSize: 5,
                    address: that.$route.params.id
                }
            })
            .then(function (res) {
                that.transactionList = res.data.data
                loading.close()
            })
            .catch(function (error) {
                loading.close()
                console.log(error);
            })
        },
		// async getList(){
			
		// 	try {
		// 		const res = await gets.pageList('/transaction/getTransactionByReceiptAddress', {
		// 			address:this.$parent.paramsId,
		// 			pageNum:this.currentPage,
		// 			pageSize:this.pageSize
		// 		});
		// 		this.pageTotal = res.pages;
		// 		this.list = res.list;
		// 		console.log(this.list);
		// 	} catch (e) {
		// 		throw e;
		// 	}
		// }
	}
}
</script>

<style lang="scss">
.callspan{
    cursor: pointer;
    color: rgb(204, 163, 60) !important;
}
</style>